<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Particleground背景粒子</title>
		<script src="./js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/jquery.particleground.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="./js/bootstrap.min.css" />
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			html,
			body {
				width: 100%;
				height: 100%;
				overflow: hidden;
			}

			canvas {
				opacity: 0.4;
			}

			body {
				background: url(./img/bg1.jpg);
				background-size: cover;
			}

			#login {
				background-color: rgba(0, 0, 0, 0.5);
				border-radius: 0.5rem;
			}
		</style>
	</head>
	<body>
		<div id="login" style="width:50%;height: auto; position: absolute; z-index: 1; color: white;top: 30%; left: 25%;">
			<div class="container">
				<form action="" method="post">
					<div class="row">
						<div class="col-12 my-3">
							<div class="col-auto my-1">
								用户名
							</div>
							<input type="text" class="form-control" id="exampleFormControlInput1" placeholder="请输入用户名">
						</div>
						<div class="col-12 mb-3">
							<div class="col-auto my-1">
								密码
							</div>
							<input type="password" class="form-control" id="exampleFormControlInput1" placeholder="请输入密码">
						</div>
						<div class=" col-12  ml-3 custom-control custom-checkbox">
							<input type="checkbox" class="custom-control-input" id="customCheck1">
							<label class="custom-control-label text-primary" for="customCheck1">同意协议</label>
						</div>
						<div class="col-12 my-3">
							<button type="submit " class="btn btn-primary btn-md btn-block">登录</button>
						</div>
					</div>
				</form>

			</div>
		</div>
		<script type="text/javascript">
			$(function() {
				$("body").particleground({
					dotColor: '#aaffff',
					lineColor: '#ffffff',
					maxSpeedY: 1,
					minSpeedY: 0.1,
					directionX: "right",
					directionY: "down"
				});
			});
		</script>
	</body>
</html>
